<script setup>
  import {
    base64_base_bg_image,
    base64_dialog_bg_image
  } from '@/static/base64'
  import {
    ref
  } from 'vue'
  import button_cancel from '@/static/images/button_cancel.png'
  import button_confirm from '@/static/images/button_confirm.png'
  import {
    onLoad
  } from '@dcloudio/uni-app'

  const baseBgImage = base64_base_bg_image // 背景图片
  const bg_dialog_src = base64_dialog_bg_image // 弹窗背景图片
  const cancel_src = button_cancel // 取消按钮图片
  const now_pay_src = button_confirm // 确认支付按钮图片
  const currentTimestamp = Date.now() // 当前时间戳
  const petForm = ref({
    name: '', // 宠物昵称
    type: '', // 宠物品种
    age: '', // 年龄
    checkInTime: '', // 入住时间
  }) // 表单数据
  const beShowPayDialog = ref(false) // 是否显示支付弹窗
  const captchaForm = ref({
    one: '',
    two: '',
    three: '',
    four: '',
    five: '',
    six: '',
  }) // 验证码表单

  // 验证码输入框引用
  const oneInput = ref(null)
  const twoInput = ref(null)
  const threeInput = ref(null)
  const fourInput = ref(null)
  const fiveInput = ref(null)
  const sixInput = ref(null)

  // 验证码输入框聚焦状态
  const oneInputFocus = ref(false)
  const twoInputFocus = ref(false)
  const threeInputFocus = ref(false)
  const fourInputFocus = ref(false)
  const fiveInputFocus = ref(false)
  const sixInputFocus = ref(false)

  // 改变 - 入住时间
  const checkInTimeChange = (event) => {
    console.log('入住时间', event)
    petForm.value.checkInTime = event // 更新入住时间
  }
  // 点击 - 确认入住
  const confirmSubmit = () => {
    // 表单验证
    if (!petForm.value.name) {
      uni.showToast({
        title: '请输入宠物昵称',
        icon: 'none',
      })
      return
    }

    if (!petForm.value.type) {
      uni.showToast({
        title: '请输入宠物品种',
        icon: 'none',
      })
      return
    }

    if (!petForm.value.age) {
      uni.showToast({
        title: '请输入宠物年龄',
        icon: 'none',
      })
      return
    }

    // if (!petForm.value.checkInTime) {
    //   uni.showToast({
    //     title: '请选择入住时间',
    //     icon: 'none',
    //   })
    //   return
    // }

    // 提交逻辑
    console.log('提交表单', petForm.value)


    // 提交成功后的处理
    // beShowPayDialog.value = true
    updateUserPet()

  }


  const updateUserPet = () => {
    petForm.value.userId = wx.getStorageSync('token').userId
    uni.request({
      url: 'https://sharebilliardstcp.wteam.club/macback/updateUserPet',
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      data: petForm.value,

      success(res) {
        console.log('updateUserPet成功', res)

        // uni.navigateBack()

        uni.navigateTo({
          url: '/pages/reserve/success',
        })

      },
    })
  }


  onLoad((option) => {

    getUserDesc(wx.getStorageSync('token').userId)

  })

  const getUserDesc = (id) => {
    if (!id) return;

    uni.request({
      url: 'https://sharebilliardstcp.wteam.club/macback/getUserInfo?id=' + id,
      method: 'GET',
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },

      success(res) {
        console.log('用户信息', res)

        uni.setStorageSync("petInfo", res.data.data)
        petForm.value.name = res.data.data.pet_nickname
        petForm.value.type = res.data.data.pet_breeds
        petForm.value.age = res.data.data.pet_age


        // if (!res.data.data.pet_nickname) {

        //   uni.navigateTo({
        //     url: '/pages/reserve/contentNew',
        //   })
        // } else {

        // uni.showToast({
        //   title: '尚未预约，请联系店主预约',
        //   icon: 'none',
        // })

        // }

      },
    })

  }

  // 聚焦 - 到下一个输入框
  const focusNextInput = (currentInput) => {
    switch (currentInput) {
      case 'one':
        if (captchaForm.value.one.length === 1) {
          oneInputFocus.value = false
          twoInputFocus.value = true
        }
        break
      case 'two':
        if (captchaForm.value.two.length === 1) {
          twoInputFocus.value = false
          threeInputFocus.value = true
        }
        break
      case 'three':
        if (captchaForm.value.three.length === 1) {
          threeInputFocus.value = false
          fourInputFocus.value = true
        }
        break
      case 'four':
        if (captchaForm.value.four.length === 1) {
          fourInputFocus.value = false
          fiveInputFocus.value = true
        }
        break
      case 'five':
        if (captchaForm.value.five.length === 1) {
          fiveInputFocus.value = false
          sixInputFocus.value = true
        }
        break
      case 'six':
        // 最后一个输入框，可以进行下一步操作
        break
    }
  }
  // 处理退格键
  const handleBackspace = (currentInput) => {
    if (event.key === 'Backspace') {
      switch (currentInput) {
        case 'two':
          if (captchaForm.value.two.length === 0) {
            captchaForm.value.one = ''
            twoInputFocus.value = false
            oneInputFocus.value = true
          }
          break
        case 'three':
          if (captchaForm.value.three.length === 0) {
            captchaForm.value.two = ''
            threeInputFocus.value = false
            twoInputFocus.value = true
          }
          break
        case 'four':
          if (captchaForm.value.four.length === 0) {
            captchaForm.value.three = ''
            fourInputFocus.value = false
            threeInputFocus.value = true
          }
          break
        case 'five':
          if (captchaForm.value.five.length === 0) {
            captchaForm.value.four = ''
            fiveInputFocus.value = false
            fourInputFocus.value = true
          }
          break
        case 'six':
          if (captchaForm.value.six.length === 0) {
            captchaForm.value.five = ''
            sixInputFocus.value = false
            fiveInputFocus.value = true
          }
          break
      }
    }
  }
  // 点击 - 验证码弹窗 - 取消按钮
  const clickCancel = () => {
    beShowPayDialog.value = false
  }
  // 点击 - 验证码弹窗 - 确认按钮
  const clickPayNow = () => {
    // 验证码验证逻辑
    if (
      !captchaForm.value.one ||
      !captchaForm.value.two ||
      !captchaForm.value.three ||
      !captchaForm.value.four ||
      !captchaForm.value.five ||
      !captchaForm.value.six
    ) {
      uni.showToast({
        title: '请输入完整验证码',
        icon: 'none',
      })
      return
    }

    beShowPayDialog.value = false
    // 跳转预约成功页面
    uni.navigateTo({
      url: '/pages/reserve/success',
    })
  }
</script>

<template>
  <!-- 主要 -->
  <view class="main" :style="{ backgroundImage: `url(${baseBgImage})` }">
    <!-- 内容 -->
    <view class="content">
      <!-- 标题 -->
      <view class="title">
        <text class="title-text">确认信息</text>
      </view>

      <!-- 表单区域 -->
      <view class="form-area">
        <view class="form-item">
          <text class="form-label">宠物昵称：</text>
          <input class="form-input" v-model="petForm.name" placeholder="请输入宠物昵称" />
        </view>

        <view class="form-item">
          <text class="form-label">宠物品种：</text>
          <input class="form-input" v-model="petForm.type" placeholder="请输入宠物品种" />
        </view>

        <view class="form-item">
          <text class="form-label">年龄：</text>
          <input class="form-input" v-model="petForm.age" placeholder="请输入宠物年龄" />
        </view>

        <!--        <view class="form-item">
          <text class="form-label">入住时间：</text>
          <uni-datetime-picker
            type="datetime"
            :value="petForm.checkInTime"
            :start="currentTimestamp"
            @change="checkInTimeChange"
          >
            <view class="form-input date-input">
              <text v-if="petForm.checkInTime">{{ petForm.checkInTime }}</text>
              <text v-else class="placeholder">请选择入住时间</text>
            </view>
          </uni-datetime-picker>
        </view> -->

      </view>

      <!-- 确认按钮 -->
      <view class="btn-container">
        <button class="confirm-btn" @click="confirmSubmit">确认入住信息</button>
      </view>
    </view>
    <!-- 支付弹窗 -->
    <view v-show="beShowPayDialog" class="pay-dialog" :style="{ backgroundImage: `url(${bg_dialog_src})` }">
      <view class="dialog-content">
        <view class="cancel-view">
          <image @click="clickCancel" class="cancel-button" :src="cancel_src" mode="heightFix" />
        </view>
        <!-- 验证码 -->
        <view class="captcha-view">
          <input class="input-item" type="number" v-model="captchaForm.one" oninput="value=value.replace(/[^\d]/g,'')"
            maxlength="1" ref="oneInput" @input="focusNextInput('one')" :focus="oneInputFocus"
            @keydown="handleBackspace('one')" />
          <input class="input-item" type="number" v-model="captchaForm.two" maxlength="1" ref="twoInput"
            @input="focusNextInput('two')" :focus="twoInputFocus" @keydown="handleBackspace('two')" />
          <input class="input-item" type="number" v-model="captchaForm.three" maxlength="1" ref="threeInput"
            @input="focusNextInput('three')" :focus="threeInputFocus" @keydown="handleBackspace('three')" />
          <input class="input-item" type="number" v-model="captchaForm.four" maxlength="1" ref="fourInput"
            @input="focusNextInput('four')" :focus="fourInputFocus" @keydown="handleBackspace('four')" />
          <input class="input-item" type="number" v-model="captchaForm.five" maxlength="1" ref="fiveInput"
            @input="focusNextInput('five')" :focus="fiveInputFocus" @keydown="handleBackspace('five')" />
          <input class="input-item" type="number" v-model="captchaForm.six" maxlength="1" ref="sixInput"
            @input="focusNextInput('six')" :focus="sixInputFocus" @keydown="handleBackspace('six')" />
        </view>
        <view class="time-view">
          <text class="interval-text">30S</text>
        </view>
        <view class="confirm-view">
          <image @click="clickPayNow" class="pay-now-button" :src="now_pay_src" mode="widthFix" />
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    // 背景图片自适应
    background-size: 100% 100%;
    position: relative;

    // 内容
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 40rpx;

      // 标题
      .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 200rpx;
        margin-bottom: 40rpx;
        color: #fff;

        // 欢迎文本
        .title-text {
          font-size: 48rpx;
          font-weight: 500;
        }
      }

      // 表单区域
      .form-area {
        width: 90%;
        margin-top: 40rpx;

        // 表单项
        .form-item {
          display: flex;
          align-items: center;
          margin-bottom: 30rpx;

          // 表单标签
          .form-label {
            color: #fff;
            font-size: 32rpx;
            width: 160rpx;
            text-align: justify;
            text-align-last: justify;
            margin-right: 10rpx;
          }

          // 表单输入框
          .form-input {
            flex: 1;
            height: 50rpx;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 35rpx;
            padding: 0 20rpx;
            font-size: 28rpx;
          }

          // 日期输入框
          .date-input {
            display: flex;
            align-items: center;

            .placeholder {
              color: #999;
            }
          }
        }
      }

      // 按钮容器
      .btn-container {
        position: absolute;
        bottom: 200rpx;
        width: 100%;
        display: flex;
        justify-content: center;

        // 确认按钮
        .confirm-btn {
          width: 80%;
          height: 90rpx;
          line-height: 90rpx;
          background-color: #fff;
          color: #163c7a;
          font-size: 40rpx;
          font-weight: 600;
          border-radius: 15rpx;
          text-align: center;
        }
      }
    }

    // 支付弹窗
    .pay-dialog {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: 100% 100%;

      // 弹窗内容
      .dialog-content {
        width: 100%;
        height: 45%;
        margin-top: 58%;

        // 取消按钮
        .cancel-view {
          height: 10%;

          .cancel-button {
            height: 100%;
            float: right;
            margin-right: 3%;
          }
        }

        // 验证码
        .captcha-view {
          margin-top: 39%;
          height: 7.5%;
          padding: 0 27.2% 0 27.8%;
          display: flex;
          justify-content: center;
          align-items: center;

          .input-item {
            width: 12.5%;
            height: 100%;
            margin-right: 5.5%;
            color: rgb(27, 64, 124);
            font-size: 36rpx;
            text-align: center;
          }

          // 最后一个输入框不需要margin
          .input-item:last-child {
            margin-right: 0;
          }
        }

        // 预约时间
        .time-view {
          margin-top: 4%;
          height: 5%;

          .interval-text {
            line-height: 100%;
            height: 100%;
            font-size: 24rpx;
            color: white;
            margin-left: 50%;
          }

          .total-text {
            font-size: 30rpx;
            color: white;
            margin-left: 6%;
          }
        }

        // 确认支付按钮
        .confirm-view {
          height: 30%;
          // 按钮居中
          display: flex;
          justify-content: center;
          align-items: center;

          .pay-now-button {
            width: 80%;
          }
        }
      }
    }
  }
</style>
